<template>
  <div class="main" v-loading="detailLoading">
    <el-form ref="form" size="mini" :model="form" disabled label-width="100px" :rules="rules">
      <el-row :gutter="24">
        <responseBox>
          <el-form-item label="产品名称" prop="materialName">
            <el-input v-model="form.materialName" placeholder="产品名称" ></el-input>
          </el-form-item>
        </responseBox>
        <responseBox>
          <el-form-item label="产品图号" prop="innerDrawingNo">
            <el-input v-model="form.innerDrawingNo" placeholder="产品图号" ></el-input>
          </el-form-item>
        </responseBox>
        <responseBox>
          <el-form-item label="产品编码" prop="materialNo">
            <el-input v-model="form.materialNo" placeholder="产品编码" ></el-input>
          </el-form-item>
        </responseBox>
      </el-row>
    </el-form>
    <avue-crud :option="option" :data="scopeData" v-model="scopeForm">
      <template slot="menuLeft">
        <el-button type="text" icon="el-icon-plus" @click="addRowFn">新增</el-button>
      </template>
      <template slot="drawingScFlag" slot-scope="{row}">
        <el-radio-group v-model="row.drawingScFlag" class="radio_group_self">
          <el-radio v-for="item in specialSymnols" :key="item.id" :label="item.id">
            <img style="width: 30px; height: 25px; vertical-align: middle;" :src="item.notation">
          </el-radio>
          <el-radio label="1">
            <span style="display: inline-block; width: 30px; height: 25px; line-height: 25px; font-size: 12px;">取消</span>
          </el-radio>
        </el-radio-group>
      </template>
      <template slot="scType" slot-scope="{row}">
        <el-select size="mini" filterable v-model="row.scType" placeholder="请选择特性类别" style="width: 100%;">
          <el-option v-for="item in scTypeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </template>
      <template slot="productSc" slot-scope="{row}">
        <el-input v-show="row.scType==1" maxlength="30" v-model="row.productSc" size="mini" placeholder="请输入产品特性"></el-input>
      </template>
      <template slot="procedureSc" slot-scope="{row}">
        <el-input v-show="row.scType==2" maxlength="30" v-model="row.procedureSc" size="mini" placeholder="请输入过程特性"></el-input>
      </template>
      <template slot-scope="{row}" slot="menu">
        <el-tooltip content="删除" style="height:auto" effect="dark" class="rightbtn" placement="bottom">
          <div class="top-bar__item">
            <el-button type="text" size="small" icon="el-icon-delete" @click.stop="scopeRowDel(row)"></el-button>
          </div>
        </el-tooltip>	  
      </template>
    </avue-crud>
    <div class="center mt">
      <el-button icon="el-icon-circle-plus-outline" :loading="saveLoading" type="primary" size="mini" @click="saveFn">保 存</el-button>
      <el-button icon="el-icon-circle-close" :loading="saveLoading" size="mini" @click="$emit('close')">取 消</el-button>
    </div>
  </div>
</template>

<script>
import responseBox from '@/components/base-small/response-box.vue'
import {getSpecialSymbols} from '@/api/publicbasic/specialSymbols.js'
import { getQualityList } from '@/api/project/information/base'
import { addFeature } from '@/api/project/productData/processData';
export default {
  name: 'MainCom',
  props: ['form','type'],
  components: {
    responseBox
  },
  data () {
    return {
      scTypeList: [
        {
          label: '产品特性',
          value: '1'
        },
        {
          label: '过程特性',
          value: '2'
        }
      ],
      scKindListObj: {},
      specialSymnols: [],
      detailLoading: false,
      saveLoading: false,
      scopeData: [],
      scopeForm: {
        scType: ''
      },
      option: {
        page: false,
        addRowBtn: false,
        cellBtn: false,
        editBtn: false,
        addBtn: false,
        cancelBtn: false,
        menuWidth: 80,
        column: [
          {
            label: '特性类别',
            prop: 'scType',
            slot: true,
            width: 120
          },
          {
            label: '产品特性',
            prop: 'productSc',
            slot: true,
            minWidth: 150,
            maxlength: 30,
          },
          {
            label: '过程特性',
            prop: 'procedureSc',
            slot: true,
            minWidth: 150,
            maxlength: 30,
          },
          {
            label: '特性分类',
            prop: 'scKind',
            minWidth: 90,
            cell: true,
            filterable: true,
            type: 'select',
            dicData: [],
            props: {
              label: 'quaType',
              value: 'id',
            },
            rules: [
              {
                required: true,
                message: '请选择特性分类',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '特殊特性标识',
            prop: 'drawingScFlag',
            display: false,
            slot: true,
            minWidth: 220,
          },
        ],
      },
    }
  },
  created () {
    getSpecialSymbols().then(res => {
      this.specialSymnols = res.data.data
    })
    getQualityList().then((res) => {
      this.findObject(this.option.column, 'scKind').dicData = res.data.data.map(item => {
        item.quaType = item.quaType + '-' + item.definition
        return item
      })
      res.data.data.forEach(item => {
        this.scKindListObj[item.id] = item.quaType
      })
    });
  },
  methods: {
    addRowFn () {
      this.scopeData.push({
        scType: '1',
        productSc: '',
        procedureSc: '',
        scKind: '',
        drawingScFlag: '',
        $cellEdit: true
      })
    },
    saveFn () {
      if (this.scopeData.length == 0) {
        this.$message.warning('请添加产品特性信息');
        return;
      }
      for (let i=0; i<this.scopeData.length; i++) {
        // if (!this.scopeData[i].productSc&&!this.scopeData[i].procedureSc) {
        //   this.$message.error(`【产品特性清单】第${i + 1}行 请维护产品特性或过程特性`)
        //   return
        // }
        // if (!this.scopeData[i].scKind) {
        //   this.$message.error(`【产品特性清单】第${i + 1}行 请选择特性分类`)
        //   return
        // }
        if (this.scopeData[i].scType==1) {
          this.scopeData[i].procedureSc = ''
        } else {
          this.scopeData[i].productSc = ''
        }
        if (this.scopeData[i].scType==1&&!this.scopeData[i].productSc) {
          this.$message.error(`【产品特性清单】第${i + 1}行 请维护产品特性`)
          return
        }
        if (this.scopeData[i].scType==2&&!this.scopeData[i].procedureSc) {
          this.$message.error(`【产品特性清单】第${i + 1}行 请维护过程特性`)
          return
        }
      }
      this.saveLoading = true
      let content = this.scopeData.map((item) => {
        item.productId = this.form.productId;
        return item;
      });
      addFeature(content).then(res => {
        this.$message.success(res.data.msg)
        this.saveLoading = false
        if (this.type=='innerUse') { // 特性清单页面用
          this.$emit('reload')
        } else { // 其他页面用
        let data = res.data.data.map(item => {
          item.scKindStr = this.scKindListObj[item.scKind]
          return item
        })
          this.$emit('sendScListData', data)
        }
      }).catch(() => {
        this.saveLoading = false
      })
    },
    scopeRowDel(row) {
      this.$confirm('确定删除数据?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.scopeData.splice(row.$index, 1)
        })
        .catch(() =>{})
    },
  }
}
</script>

<style scoped lang="scss">
.radio_group_self /deep/ .el-radio {
  margin: 0px 14px 0px 0;
}
</style>